{% set profile = user.profile|default({}) %}
<form id="user-settings-form"
      class="grid gap-4"
      method="post"
      hx-post="{{ url_for('user.settings') }}"
      hx-target="#user-settings-page"
      hx-select="#user-settings-page"
      hx-swap="outerHTML">
  <div class="card bg-base-100 shadow">
    <div class="card-body gap-6">
      <div class="flex flex-col gap-3 md:flex-row md:items-center">
        <div class="flex-1">
          <p class="text-sm font-semibold uppercase text-base-content/60">User</p>
          <h2 class="card-title text-3xl">{{ user.name }}</h2>
          <p class="text-sm text-base-content/70">{{ user.username }}</p>
        </div>
        <button type="submit" class="btn btn-success md:self-start">Save changes</button>
      </div>

      <div class="grid gap-4 md:grid-cols-2">
        <label class="flex items-start justify-between gap-4 rounded-xl border border-base-300 bg-base-200 p-4 hover:border-base-200"
               for="split-view-toggle">
          <div>
            <p class="font-semibold text-base-content">Split view</p>
            <p class="mt-1 text-sm text-base-content/70">Show the assess interface and story details side by side.</p>
          </div>
          <div class="shrink-0">
            <input type="hidden" name="split_view" value="false">
            <input id="split-view-toggle"
                   name="split_view"
                   type="checkbox"
                   value="true"
                   class="toggle toggle-primary"
                   {% if profile.split_view %}checked{% endif %}>
          </div>
        </label>

        <label class="flex items-start justify-between gap-4 rounded-xl border border-base-300 bg-base-200 p-4 hover:border-base-200"
               for="compact-view-toggle">
          <div>
            <p class="font-semibold text-base-content">Compact view</p>
            <p class="mt-1 text-sm text-base-content/70">Use condensed spacing for tables and lists.</p>
          </div>
          <div class="shrink-0">
            <input id="compact-view-toggle"
                   name="compact_view"
                   type="checkbox"
                   value="true"
                   class="toggle toggle-primary"
                   {% if profile.compact_view %}checked{% endif %}>
          </div>
        </label>

        <label class="flex items-start justify-between gap-4 rounded-xl border border-base-300 bg-base-200 p-4 hover:border-base-200"
               for="show-charts-toggle">
          <div>
            <p class="font-semibold text-base-content">Show charts</p>
            <p class="mt-1 text-sm text-base-content/70">Display dashboard visualisations when available.</p>
          </div>
          <div class="shrink-0">
            <input id="show-charts-toggle"
                   name="show_charts"
                   type="checkbox"
                   value="true"
                   class="toggle toggle-primary"
                   {% if profile.show_charts %}checked{% endif %}>
          </div>
        </label>

        <label class="flex items-start justify-between gap-4 rounded-xl border border-base-300 bg-base-200 p-4 hover:border-base-200"
               for="dark-theme-toggle">
          <div>
            <p class="font-semibold text-base-content">Dark theme</p>
            <p class="mt-1 text-sm text-base-content/70">Prefer a dark colour palette across the application.</p>
          </div>
          <div class="shrink-0">
            <span class="text">Can only be changed in system or browser settings</span>
          </div>
        </label>

        <label class="flex items-start justify-between gap-4 rounded-xl border border-base-300 bg-base-200 p-4 hover:border-base-200"
               for="infinite-scroll-toggle">
          <div>
            <p class="font-semibold text-base-content">Infinite scroll</p>
            <p class="mt-1 text-sm text-base-content/70">Automatically load more results when you reach the bottom.</p>
          </div>
          <div class="shrink-0">
            <input id="infinite-scroll-toggle"
                   name="infinite_scroll"
                   type="checkbox"
                   value="true"
                   class="toggle toggle-primary"
                   {% if profile.infinite_scroll %}checked{% endif %}>
          </div>
        </label>

        <label class="flex items-start justify-between gap-4 rounded-xl border border-base-300 bg-base-200 p-4 hover:border-base-200"
               for="advanced-story-toggle">
          <div>
            <p class="font-semibold text-base-content">Advanced story options</p>
            <p class="mt-1 text-sm text-base-content/70">Expose additional actions in story detail view.</p>
          </div>
          <div class="shrink-0">
            <input id="advanced_story_options"
                   name="advanced_story_options"
                   type="checkbox"
                   value="true"
                   class="toggle toggle-primary"
                   {% if profile.advanced_story_options %}checked{% endif %}>
          </div>
        </label>
      </div>

      <div class="grid gap-4 md:grid-cols-2">
        <div class="rounded-xl border border-base-300 bg-base-200 p-4">
          <label class="form-control w-full" for="language-select">
            <div class="label">
              <span class="label-text font-semibold text-base-content">Language</span>
            </div>
            <select id="language-select" name="language" class="select select-bordered w-full">
              {{ language_options }}
              {% for option in language_options %}
                <option value="{{ option.id }}" {% if option.id == profile.language %}selected{% endif %}>{{ option.name }}</option>
              {% endfor %}
            </select>
            <div class="label">
              <span class="label-text-alt text-base-content/70">Choose the interface language.</span>
            </div>
          </label>
        </div>

        <div class="rounded-xl border border-base-300 bg-base-200 p-4">
          <label class="form-control w-full" for="end-of-shift">
            <div class="label">
              <span class="label-text font-semibold text-base-content">End of shift</span>
            </div>
            <input id="end-of-shift" name="end_of_shift" type="time" value="{{ profile.end_of_shift }}" class="input input-bordered w-full" />
            <div class="label">
              <span class="label-text-alt text-base-content/70">Used to plan notifications and highlights.</span>
            </div>
          </label>
        </div>
      </div>

      <div class="rounded-xl border border-base-300 bg-base-200 p-4" data-sse-section>
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p class="font-semibold text-base-content">Live updates</p>
            <p class="text-sm text-base-content/70" data-sse-label>Checking connection status…</p>
          </div>
          <label class="flex items-center gap-3">
            <span class="text-sm text-base-content">Enable SSE</span>
            <input type="checkbox" class="toggle toggle-success" data-sse-toggle>
          </label>
        </div>
        <p class="mt-2 text-xs text-base-content/60" data-sse-hint>Server-sent events let the UI react to changes without refreshing.</p>
        <p class="mt-1 text-xs text-base-content/60 font-mono break-all">{{ core_sse_url }}</p>
      </div>
    </div>
  </div>
</form>

<form id="user-password-form"
      class="grid gap-4 my-6"
      method="post"
      hx-post="{{ url_for('user.change_password') }}"
      hx-target="#notification-bar"
      hx-swap="outerHTML">
  <div class="card bg-base-100 shadow">
    <div class="card-body gap-4">
      <div tabindex="0" class="collapse collapse-arrow rounded-box border border-base-300 bg-base-200">
        <input type="checkbox" />
        <div class="collapse-title flex flex-col gap-1">
          <p class="text-sm font-semibold uppercase text-base-content/60">Password</p>
          <h3 class="text-2xl font-semibold text-base-content">Change your password</h3>
          <p class="text-sm text-base-content/70">Keep this secure and avoid reusing passwords from other systems.</p>
        </div>
        <div class="collapse-content p-0">
          <div class="flex flex-col gap-4 p-4">
            <label class="form-control w-full" for="current-password-input">
              <div class="label">
                <span class="label-text font-semibold text-base-content">Current password</span>
              </div>
              <input id="current-password-input"
                     name="current_password"
                     type="password"
                     class="input input-bordered w-full"
                     autocomplete="current-password"
                     required>
            </label>

            <label class="form-control w-full" for="new-password-input">
              <div class="label">
                <span class="label-text font-semibold text-base-content">New password</span>
              </div>
              <input id="new-password-input" name="new_password" type="password" class="input input-bordered w-full" autocomplete="new-password" required>
            </label>

            <label class="form-control w-full" for="confirm-password-input">
              <div class="label">
                <span class="label-text font-semibold text-base-content">Confirm new password</span>
              </div>
              <input id="confirm-password-input" name="confirm_password" type="password" class="input input-bordered w-full" autocomplete="new-password" required>
            </label>

            <div class="flex items-center justify-end">
              <button type="submit" class="btn btn-primary">Update password</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

<div class="card bg-base-100 shadow">
  <div class="card-body gap-4">
    <div class="flex flex-col gap-2">
      <h3 class="card-title text-2xl">Keyboard Shortcuts</h3>
      <p class="text-sm text-base-content/70">
        HotKeys are currently static only.
        <a class="link" href="https://github.com/taranis-ai/taranis-ai/issues/137" target="_blank" rel="noreferrer">Issue #137</a>
        tracks progress on making them configurable.
      </p>
    </div>
    {% include "user_profile/hotkey_kbd.html" %}
  </div>
</div>
